<template>
	<view class="container">
		<view class="homeBg">
			<view @tap="back" class="icon-left">
				<u-icon name="arrow-left" color="#fff" size="16"></u-icon>
			</view>
			<view class="title">我的积分</view>
			<view class="btn-point-detail" @tap="toPointDetail">查看更多</view>
			<view class="btn-point-detail">
				<u-icon name="arrow-right" color="#fff" size="16"></u-icon>
			</view>
			<!-- <image src="../../static/home/search.png" mode="widthFix" class="searchIcon"></image> -->
		</view>
		<view class="searchBox">
			<u-search placeholder="请输入积分名称" v-model="billName_like" @search="searchFn" @custom="searchFn"></u-search>
		</view>
		<view class="tabBox">
			<view>
				<u-tabs activeStyle="color:#000;font-size: 32upx;font-weight: bold;" :current="swiperCurrent"
					inactiveStyle="color: #000;transition: all 0.5s;font-size: 26upx;font-weight: 500"
					lineColor="#CEA539" lineWidth="42upx"
					itemStyle="height:72upx;flex:1;display:flex;align-items: center;justify-content: center;"
					:list="tabBoxList" @change="tabsChange"></u-tabs>
			</view>
		</view>
		<view class="goods_list">

			<view class="listCentent" v-if="list.length>0">
				<view class="list-item" v-for="(item,index) in list" :key="index"
					v-if="billTypeList.includes(item.billType) && (status == 0 ? true : item.coldNumber!== 0)">
					<view class="list-item-center">
						<view class="name">积分代码：{{item.billCode}}</view>
						<view class="name">积分名称：{{item.billName}}</view>
						<view class="name" v-if="item.billType==1">积分价格：{{item.price}}</view>
						<view class="name">发行方：{{item.enterpriseName}}</view>
						<u-row gutter="16">
							<u-col span="9">
								<view class="number" v-if="swiperCurrent == 0">持有量：{{item.hotNumber}}个</view>
								<view class="number" v-else>冻结数量：{{item.coldNumber}}个</view>
							</u-col>
							<u-col span="4" v-if="item.hotNumber > 0">
								<view style="width: 20upx;">
									<u-button type="primary" v-if="item.billType==1" size="mini"
										@click="showSellTicket(item)">转让</u-button>
								</view>

							</u-col>
						</u-row>


						<!-- <view class="number">发售价：{{item.issuesPrice}}/个</view> -->


					</view>
					<!-- <view class="btn" @tap="pledge(item)">质押</view> -->
				</view>
				<view class="msg" v-if="isEnd&&list.length>0">
					<image src="../../static/home/line.png" mode="widthFix" class="left-line"></image>
					<text class="text">没有更多内容啦</text>
					<image src="../../static/home/line.png" mode="widthFix" class="right-line"></image>
				</view>
			</view>
			<view v-show="list.length == 0" class="noListBox">
				<view class="noData">
					<image class="noDataImg" src="../../static/home/noData.png" mode=""></image>
					<view class="text">暂无数据</view>
				</view>
			</view>
		</view>

		<view class="popupBox" v-if="!hasLogin && isPopupShow">
			<view v-if="!hasLogin">
				<text>请先前往登录吧！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去登录</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
			<view v-if="hasLogin && uerInfo.isRealName != 1">
				<text>实名认证后才可以购买哦！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去认证</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
		<u-modal :show="isShowModal" title="转让" :showCancelButton="true" @confirm="confirmFn" @cancel="cancelFn">
			<view>
				<view>
					<u-row gutter="16">
						<u-col span="7">
							<view>
								积分名称
							</view>
						</u-col>
						<u-col span="12">
							<view class="demo-layout bg-purple-light">{{currentBillName}}</view>
						</u-col>

					</u-row>
					<u-row gutter="16">
						<u-col span="7">
							<view class="demo-layout bg-purple">
								积分编号
							</view>
						</u-col>
						<u-col span="12">
							<view class="demo-layout bg-purple-light">
								{{currentBillCode}}
							</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="7">
							<view class="demo-layout bg-purple">
								积分价格
							</view>
						</u-col>
						<u-col span="12">
							<view class="demo-layout bg-purple-light">
								{{currentBillPrice}}
							</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="7">
							<view class="demo-layout bg-purple">
								持有量
							</view>
						</u-col>
						<u-col span="12">
							<view class="demo-layout bg-purple-light">
								{{currentHotNumber}}
							</view>
						</u-col>
					</u-row>
				</view>
				<view>
					<u-number-box v-model="currentBillNum" @change="currentBillNumChange" :min="0"
						:max="currentHotNumber" :input-width="100"></u-number-box>
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
		<!-- <u-loading-icon text="加载中" textSize="18" :show="true"></u-loading-icon> -->
	</view>
</template>

<script>
	import {
		PATH_IMG,
		BASE_API
	} from '@/common/config.js';
	import {
		exuserbillassetsList,
		tradesUserSellTicket
	} from "@/api/home.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		throttle
	} from "@/common/util.js"
	export default {
		data() {
			return {
				isScrollY: false,
				tabBoxList: [{
						id: "",
						name: "可用积分",
					},
					{
						id: 0,
						name: "冻结积分",
					}
				],
				list: [],
				swiperCurrent: 0,
				page: 1,
				pageSize: 20,
				status: "0",
				isEnd: false,
				billName_like: "",
				isShowModal: false,
				currentBillCode: "",
				currentBillName: "",
				currentBillNum: 0,
				currentHotNumber: 0,
				currentBillPrice: "",
				billTypeList: [0, 1, 3]
			}
		},
		onLoad() {
			this.getList(this.page, this.pageSize);
		},
		onShow() {
			if (!this.hasLogin) {
				uni.reLaunch({
					url: "/pages/login/login"
				});
			}
		},
		computed: {
			...mapState(["hasLogin", "uerInfo", "h5Data"])
		},
		methods: {
			toPointDetail() {
				const url = '/pages/user/pointDetail';
				uni.navigateTo({
					url: url,
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			currentBillNumChange(item) {
				console.log("当前数量 " + item.value)
			},
			cancelFn() {
				this.isShowModal = false;
			},
			confirmFn() {
				let param = {
					billCode: this.currentBillCode,
					sellNum: this.currentBillNum
				}
				this.sellTicket(param)
				this.isShowModal = false;
			},
			// tabs通知swiper切换
			tabsChange(e) {
				this.swiperCurrent = e.index;
				this.status = e.index;
				this.page = 1;
				this.pageSize = 20;
				this.getList(this.page, this.pageSize);
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				};
			},
			searchFn() {
				this.page = 1;
				this.isEnd = false;
				this.getList(1,200);
			},
			pledge(item) {

			},
			showSellTicket(item) {
				// if(item.billName == '安达通' || item.billCode == '221913') {
				if(item.billName == '安达通' || item.billCode == '221913') {
					return this.$u.toast('由于通道维护，提现暂停，请明天再试！')
				}
				this.currentBillName = item.billName;
				this.currentBillCode = item.billCode;
				this.currentBillPrice = item.price;
				this.currentHotNumber = item.hotNumber;
				this.isShowModal = true;
			},
			sellTicket(param) {
				tradesUserSellTicket(param).then(res => {
					if (res.data.code == 200) {
						this.$refs.uToast.show({
							message: '转让成功',
							type: 'success',
						})
					} else {
						this.$refs.uToast.show({
							message: '转让失败',
							type: 'error',
						})
					}
					this.getList(this.page, this.pageSize);
				})
				this.currentBillNum = 0;

			},
			getList(page, pageSize) { //新闻
			     let obj = {
				    	page,
				    	pageSize: pageSize || 20,
				    	status: 0,
				    	billName_like: this.billName_like,
				    	billType: "0,1,3",
						numberType:""
						};
			    if(this.status=="0"){
				    obj.numberType="hotNumber";
				}else if(this.status=="1"){
					obj.numberType="coldNumber";
				}
				console.log(obj);
				exuserbillassetsList(obj).then(res => {
					console.log(res.data);
					if (res.data.rows.length > 0) {
						let newList = [...res.data.rows];
						if (this.status == "0") {
							let list = []
							list = newList.filter(item => {
								return item.hotNumber > 0
							})
							if (page == 1) {
								this.list = [];
								this.list = [...list]
							} else {
								this.list = [...this.list, ...list]
							}
						} else {
							let list = [];
							list = newList.filter(item => {
								return item.coldNumber > 0
							})
							if (page == 1) {
								this.list = [];
								this.list = [...list];
							} else {
								this.list = [...this.list, ...list]
							}

						}

					} else {
						if (page == 1) {
							this.list = []
						}
						return;
					}
					console.log(this.page);
					if (this.page >= res.data.totalPage) {
						console.log("进入");
						this.isEnd = true;
						return
					}else{
						this.isEnd = false;
					};

					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
				}).finally(() => {
					uni.stopPullDownRefresh();
					this.$refs.min_loading.close();
				});
			},
		},
		onReachBottom: throttle(function() {
			if (!this.isEnd) {
				this.page++;
				this.getList(this.page)
			} else {
				return
			}
		}, 800),
	}
</script>
<style scoped lang="less">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.container {
		width: 100%;
		height: 100%;
		padding-top: 328upx;

		.homeBg {
			width: 100%;
			height: 120upx;
			background: url(../../static/login/bg.png) no-repeat top center;
			background-size: 100% 500%;
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9;

			.icon-left {
				position: absolute;
				left: 42upx;
				// bottom: 50upx;
				top: 50%;
				transform: translateY(-50%);
			}

			.title {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

			.btn-point-detail {
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				position: relative;
				left: 230upx;
			}

			.searchIcon {
				width: 44upx;
				position: absolute;
				right: 42upx;
				// bottom: 50upx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.searchBox {
			width: 100%;
			padding: 20upx 30upx;
			position: fixed;
			top: 120upx;
			left: 0;
			z-index: 9;
			background-color: #fff;
		}

		.popupBox {
			width: 100%;
			height: 84upx;
			position: fixed;
			bottom: 118upx;
			left: 0;
			padding: 0 40upx;
			z-index: 99;

			>view {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FCCC35;
				border-radius: 10upx;
				font-size: 24upx;
				padding: 0 30upx;
				color: #151515;

				.btns {
					display: flex;
					align-items: center;
					font-size: 0;

					.navigator {
						width: 130upx;
						height: 55upx;
						background: #191919;
						border-radius: 28upx;
						font-size: 24upx;
						font-weight: 400;
						color: #FCCC35;
						line-height: 55upx;
						text-align: center;
						margin-right: 10upx;
					}
				}
			}
		}

		.tabBox {
			width: 100%;
			padding: 0upx 20upx 30upx;
			position: fixed;
			left: 0;
			top: 224upx;
			background-color: #fff;
			z-index: 9;
		}

		.goods_list {
			width: 100%;

			.msg {
				text-align: center;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #BCBCBC;
				margin-top: 30upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					margin: 0 20upx;
				}

				.left-line {
					width: 100upx;
				}

				.right-line {
					width: 100upx;
					transform: rotate(-180deg);
				}

				// padding-bottom: 100upx;
			}

			// height: calc(100% - 30upx);

			.listCentent {
				width: 100%;
				padding: 0 30upx 50upx;

				.list-item {
					width: 100%;
					box-shadow: 0px 2px 7px 0px rgba(211, 211, 211, 0.5800);
					border-radius: 10upx;
					padding: 20upx 40upx 40upx;
					margin-bottom: 20upx;
					position: relative;

					.btn {
						background: #CEA539;
						border-radius: 10upx;
						font-size: 32upx;
						font-weight: bold;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 20upx;
						bottom: 20upx;
						padding: 10upx 30upx;
					}

					.left-line {
						width: 8upx;
						height: 40upx;
						position: absolute;
						left: 0;
						top: 46upx;
						background-color: #AAAAAA;
					}

					.one {
						color: #C20707;
						background-color: #C20707;
					}

					.two {
						color: #CEA539;
						background-color: #CEA539;
					}

					.type {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						position: absolute;
						right: 54upx;
						bottom: 42upx;
						color: #AAAAAA;
					}

					.type_one {
						color: #C20707;
					}

					.type_two {
						color: #CEA539;
					}

					.list-item-top {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid rgba(51, 51, 51, .1);

						.goods-name {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 94upx;

							.date {
								color: #333333;
							}
						}
					}

					.list-item-center {
						width: 100%;
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;

						.name {
							font-size: 30upx;
							color: #333333;
							margin-bottom: 40upx;
							margin-top: 20upx;
						}

						.number {
							// margin-bottom: 30upx;
						}
					}
				}

			}

		}

		.noListBox {
			text-align: center;

			.noData {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 500upx;

				.noDataImg {
					width: 316upx;
					height: 126upx;
				}

				.text {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B0B5BC;
					line-height: 92upx;
				}
			}
		}
	}
</style>
